{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "2.3.0\n"
     ]
    }
   ],
   "source": [
    "import os\n",
    "import shutil\n",
    "import time\n",
    "\n",
    "import matplotlib.pyplot as plt\n",
    "import numpy as np\n",
    "import tensorflow as tf\n",
    "\n",
    "from tensorflow.keras import Sequential\n",
    "from tensorflow.keras.callbacks import ModelCheckpoint, TensorBoard\n",
    "from tensorflow.keras.layers import Dense, Flatten, Softmax, Conv2D, Dropout, MaxPooling2D\n",
    "\n",
    "print(tf.__version__)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "mnist = tf.keras.datasets.mnist.load_data()\n",
    "(x_train, y_train), (x_test, y_test) = mnist"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Image height x width is 28 x 28\n",
      "There are 10 classes\n"
     ]
    }
   ],
   "source": [
    "HEIGHT, WIDTH = x_train[0].shape\n",
    "NCLASSES = tf.size(tf.unique(y_train).y)\n",
    "print(\"Image height x width is\", HEIGHT, \"x\", WIDTH)\n",
    "tf.print(\"There are\", NCLASSES, \"classes\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "def get_model():\n",
    " \n",
    "    model = Sequential([\n",
    "            Conv2D(64, kernel_size=3,\n",
    "                   activation='relu', input_shape=(WIDTH, HEIGHT, 1)),\n",
    "            MaxPooling2D(2),\n",
    "            Conv2D(32, kernel_size=3,\n",
    "                   activation='relu'),\n",
    "            MaxPooling2D(2),\n",
    "            Flatten(),\n",
    "            Dense(400, activation='relu'),\n",
    "            Dense(100, activation='relu'),\n",
    "            Dropout(.25),\n",
    "            Dense(10),\n",
    "            Softmax()\n",
    "        ])\n",
    "\n",
    "    model.compile(optimizer='adam',\n",
    "                  loss='categorical_crossentropy',\n",
    "                  metrics=['accuracy'])\n",
    "    \n",
    "    return model"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "BUFFER_SIZE = 5000\n",
    "BATCH_SIZE = 100\n",
    "\n",
    "def scale(image, label):\n",
    "    image = tf.cast(image, tf.float32)\n",
    "    image /= 255\n",
    "    image = tf.expand_dims(image, -1)\n",
    "    return image, label\n",
    "\n",
    "\n",
    "def load_dataset(training=True):\n",
    "    \"\"\"Loads MNIST dataset into a tf.data.Dataset\"\"\"\n",
    "    (x_train, y_train), (x_test, y_test) = mnist\n",
    "    x = x_train if training else x_test\n",
    "    y = y_train if training else y_test\n",
    "    # One-hot encode the classes\n",
    "    y = tf.keras.utils.to_categorical(y, NCLASSES)\n",
    "    dataset = tf.data.Dataset.from_tensor_slices((x, y))\n",
    "    dataset = dataset.map(scale).batch(BATCH_SIZE)\n",
    "    if training:\n",
    "        dataset = dataset.shuffle(BUFFER_SIZE).repeat()\n",
    "    return dataset"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Epoch 1/10\n",
      "WARNING:tensorflow:From /usr/local/lib/python3.8/dist-packages/tensorflow/python/ops/summary_ops_v2.py:1277: stop (from tensorflow.python.eager.profiler) is deprecated and will be removed after 2020-07-01.\n",
      "Instructions for updating:\n",
      "use `tf.profiler.experimental.stop` instead.\n",
      "\n",
      "Epoch 00001: saving model to mnist_digits/\n",
      "100/100 - 38s - loss: 0.6817 - accuracy: 0.7822 - val_loss: 0.1847 - val_accuracy: 0.9444\n",
      "Epoch 2/10\n",
      "\n",
      "Epoch 00002: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.1862 - accuracy: 0.9419 - val_loss: 0.1023 - val_accuracy: 0.9672\n",
      "Epoch 3/10\n",
      "\n",
      "Epoch 00003: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.1381 - accuracy: 0.9597 - val_loss: 0.0983 - val_accuracy: 0.9671\n",
      "Epoch 4/10\n",
      "\n",
      "Epoch 00004: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.1012 - accuracy: 0.9707 - val_loss: 0.0602 - val_accuracy: 0.9802\n",
      "Epoch 5/10\n",
      "\n",
      "Epoch 00005: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.0755 - accuracy: 0.9770 - val_loss: 0.0698 - val_accuracy: 0.9776\n",
      "Epoch 6/10\n",
      "\n",
      "Epoch 00006: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.0782 - accuracy: 0.9766 - val_loss: 0.0413 - val_accuracy: 0.9869\n",
      "Epoch 7/10\n",
      "\n",
      "Epoch 00007: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.0638 - accuracy: 0.9804 - val_loss: 0.0397 - val_accuracy: 0.9866\n",
      "Epoch 8/10\n",
      "\n",
      "Epoch 00008: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.0599 - accuracy: 0.9830 - val_loss: 0.0405 - val_accuracy: 0.9868\n",
      "Epoch 9/10\n",
      "\n",
      "Epoch 00009: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.0602 - accuracy: 0.9818 - val_loss: 0.0378 - val_accuracy: 0.9879\n",
      "Epoch 10/10\n",
      "\n",
      "Epoch 00010: saving model to mnist_digits/\n",
      "100/100 - 37s - loss: 0.0546 - accuracy: 0.9838 - val_loss: 0.0414 - val_accuracy: 0.9867\n",
      "training took: 390.4977 secs.\n"
     ]
    }
   ],
   "source": [
    "NUM_EPOCHS = 10\n",
    "STEPS_PER_EPOCH = 100\n",
    "\n",
    "model = get_model()\n",
    "train_data = load_dataset()\n",
    "validation_data = load_dataset(training=False)\n",
    "\n",
    "OUTDIR = \"mnist_digits/\"\n",
    "checkpoint_callback = ModelCheckpoint(\n",
    "    OUTDIR, save_weights_only=True, verbose=1)\n",
    "tensorboard_callback = TensorBoard(log_dir=OUTDIR)\n",
    "t1 = time.perf_counter()\n",
    "history = model.fit(\n",
    "    train_data, \n",
    "    validation_data=validation_data,\n",
    "    epochs=NUM_EPOCHS, \n",
    "    steps_per_epoch=STEPS_PER_EPOCH,\n",
    "    verbose=2,\n",
    "    callbacks=[checkpoint_callback, tensorboard_callback]\n",
    ")\n",
    "t2 = time.perf_counter()\n",
    "print(\"training took: {:4.4f} secs.\".format(t2 - t1))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<table>\n",
       "<td style=\"border-style: none;\">\n",
       "<div style=\"border: solid 2px #666; width: 143px; height: 144px;\">\n",
       "<canvas width=\"140\" height=\"140\"></canvas>\n",
       "</div></td>\n",
       "<td style=\"border-style: none;\">\n",
       "<button onclick=\"clear_value()\">Clear</button>\n",
       "</td>\n",
       "<td>\n",
       "Value:\n",
       "</td>\n",
       "<td>\n",
       "<h1><span id=\"predicted\">-</span></h1>\n",
       "</td>\n",
       "</table>\n",
       "\n",
       "<script type=\"text/Javascript\">\n",
       "    var pixels = [];\n",
       "    for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
       "    var click = 0;\n",
       "\n",
       "    var canvas = document.querySelector(\"canvas\");\n",
       "    canvas.addEventListener(\"mousemove\", function(e){\n",
       "        if (e.buttons == 1) {\n",
       "            click = 1;\n",
       "            predicted.textContent = \"-\"\n",
       "            canvas.getContext(\"2d\").fillStyle = \"rgb(0,0,0)\";\n",
       "            canvas.getContext(\"2d\").fillRect(e.offsetX, e.offsetY, 8, 8);\n",
       "            x = Math.floor(e.offsetY * 0.2);\n",
       "            y = Math.floor(e.offsetX * 0.2) + 1;\n",
       "            for (var dy = 0; dy < 2; dy++){\n",
       "                for (var dx = 0; dx < 2; dx++){\n",
       "                    if ((x + dx < 28) && (y + dy < 28)){\n",
       "                        pixels[(y+dy)+(x+dx)*28] = 1;\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "        } else {\n",
       "            if (click == 1) set_value();\n",
       "            click = 0;\n",
       "        }\n",
       "    });\n",
       "    \n",
       "    var predicted = document.querySelector(\"#predicted\");\n",
       "    \n",
       "    function set_value(){\n",
       "        predicted.textContent = \". . .\"\n",
       "        var result = \"\"\n",
       "        for (var i = 0; i < 28*28; i++) result += pixels[i] + \",\"\n",
       "        var kernel = IPython.notebook.kernel;\n",
       "        kernel.execute(\"pred = np.array([\"+result+\"]).reshape(HEIGHT, WIDTH)\");\n",
       "        kernel.execute(\"pred = tf.cast(pred, tf.float32)\");\n",
       "        kernel.execute(\"pred = tf.expand_dims([pred], -1)\");\n",
       "        kernel.execute(\"pred = model.predict(pred)\");\n",
       "        kernel.execute(\"pred =  '{} (confidence: {:02.2f}%)'.format(np.argmax(pred), np.max(pred)*100)\");\n",
       "        var callbacks = {\n",
       "            iopub: {\n",
       "                output: (data) => {\n",
       "                    predicted.textContent = data.content.text.trim();\n",
       "                }\n",
       "            }\n",
       "        };\n",
       "        kernel.execute(\"print(pred)\", callbacks);\n",
       "    }\n",
       "    \n",
       "    function clear_value(){\n",
       "        canvas.getContext(\"2d\").fillStyle = \"rgb(255,255,255)\";\n",
       "        canvas.getContext(\"2d\").fillRect(0, 0, 140, 140);\n",
       "        for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
       "        predicted.textContent = \"-\"\n",
       "    }\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "input_form = \"\"\"\n",
    "<table>\n",
    "<td style=\"border-style: none;\">\n",
    "<div style=\"border: solid 2px #666; width: 143px; height: 144px;\">\n",
    "<canvas width=\"140\" height=\"140\"></canvas>\n",
    "</div></td>\n",
    "<td style=\"border-style: none;\">\n",
    "<button onclick=\"clear_value()\">Clear</button>\n",
    "</td>\n",
    "<td>\n",
    "Value:\n",
    "</td>\n",
    "<td>\n",
    "<h1><span id=\"predicted\">-</span></h1>\n",
    "</td>\n",
    "</table>\n",
    "\"\"\"\n",
    "\n",
    "javascript = '''\n",
    "<script type=\"text/Javascript\">\n",
    "    var pixels = [];\n",
    "    for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
    "    var click = 0;\n",
    "\n",
    "    var canvas = document.querySelector(\"canvas\");\n",
    "    canvas.addEventListener(\"mousemove\", function(e){\n",
    "        if (e.buttons == 1) {\n",
    "            click = 1;\n",
    "            predicted.textContent = \"-\"\n",
    "            canvas.getContext(\"2d\").fillStyle = \"rgb(0,0,0)\";\n",
    "            canvas.getContext(\"2d\").fillRect(e.offsetX, e.offsetY, 8, 8);\n",
    "            x = Math.floor(e.offsetY * 0.2);\n",
    "            y = Math.floor(e.offsetX * 0.2) + 1;\n",
    "            for (var dy = 0; dy < 2; dy++){\n",
    "                for (var dx = 0; dx < 2; dx++){\n",
    "                    if ((x + dx < 28) && (y + dy < 28)){\n",
    "                        pixels[(y+dy)+(x+dx)*28] = 1;\n",
    "                    }\n",
    "                }\n",
    "            }\n",
    "        } else {\n",
    "            if (click == 1) set_value();\n",
    "            click = 0;\n",
    "        }\n",
    "    });\n",
    "    \n",
    "    var predicted = document.querySelector(\"#predicted\");\n",
    "    \n",
    "    function set_value(){\n",
    "        predicted.textContent = \". . .\"\n",
    "        var result = \"\"\n",
    "        for (var i = 0; i < 28*28; i++) result += pixels[i] + \",\"\n",
    "        var kernel = IPython.notebook.kernel;\n",
    "        kernel.execute(\"pred = np.array([\"+result+\"]).reshape(HEIGHT, WIDTH)\");\n",
    "        kernel.execute(\"pred = tf.cast(pred, tf.float32)\");\n",
    "        kernel.execute(\"pred = tf.expand_dims([pred], -1)\");\n",
    "        kernel.execute(\"pred = model.predict(pred)\");\n",
    "        kernel.execute(\"pred =  '{} (confidence: {:02.2f}%)'.format(np.argmax(pred), np.max(pred)*100)\");\n",
    "        var callbacks = {\n",
    "            iopub: {\n",
    "                output: (data) => {\n",
    "                    predicted.textContent = data.content.text.trim();\n",
    "                }\n",
    "            }\n",
    "        };\n",
    "        kernel.execute(\"print(pred)\", callbacks);\n",
    "    }\n",
    "    \n",
    "    function clear_value(){\n",
    "        canvas.getContext(\"2d\").fillStyle = \"rgb(255,255,255)\";\n",
    "        canvas.getContext(\"2d\").fillRect(0, 0, 140, 140);\n",
    "        for (var i = 0; i < 28*28; i++) pixels[i] = 0;\n",
    "        predicted.textContent = \"-\"\n",
    "    }\n",
    "</script>\n",
    "'''\n",
    "\n",
    "from IPython.display import HTML\n",
    "HTML(input_form + javascript)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}